<!DOCTYPE html>
<html>
<head  th:include="head :: fragment_head">
    <title>正在集采-详情</title>
    <link rel="stylesheet" th:src="@{/css/znstyle.css}" href="css/znstyle.css" />
</head>
<body class="grayBody">
<div class="youarehere">
    <span class="opcityText"><a href="javascript:;">首页</a></span>
    <span class="trueImg"><img th:src="@{/images/blueDian.png}" src="images/blueDian.png"></span>
    <span class="trueText"><a href="javascript:;">集采活动</a></span>
</div>
<div class="myjicaiBox">
    <div class="myjicaiBody">
        <div th:object="${collectModel}">
        <div class="mjb-floor1">
            <div class="mjbf-left">
                <img th:src="@{/images/jicaiImg.png}" src="images/jicaiImg.png"/>
            </div>
            <div class="mjbf-right">
                <p class="mjbfr-first" >品牌：<span th:text="*{brand}">东明石化</span></p>
                <p class="mjbfr-second">开始时间：<span th:text="*{start_time}">2018.12.31</span></p>
                <p class="mjbfr-second">结束时间：<span th:text="*{end_time}">2019.01.23</span></p>
                <!--<p class="mjbfr-second">-->
                    <!--距离结束时间：-->
                    <!--<span id="day_show">0天</span>-->
                    <!--<span id="hour_show">0时</span>-->
                    <!--<span id="minute_show">0分</span>-->
                    <!--<span id="second_show">0秒</span>-->
                <!--</p>-->
                <p class="mjbfr-seven" >已集采总量：<span th:text="*{amount}" >10000</span>（吨）</p>
                <p class="mjbfr-fifth" >集采编号：<span th:text="*{number}">cp20180807185951517</span></p>
            </div>
        </div>
        <div class="mjb-floor2">
            <div class="jca-tydbox">
                <p>提油点:</p>
                <div class="jca-tyd">
                    <div class="jca-form-item">
                        <input type="radio" name="type" id="adviceRadio1" value="1"  th:field="*{depot_id}"  hidden/>
                        <label for="adviceRadio1" class="advice"><i class="adviceI"></i><span>南阳油库</span></label>
                    </div>
                    <div class="jca-form-item">
                        <input type="radio" name="type" id="adviceRadio2" value="2" th:field="*{depot_id}" hidden/>
                        <label for="adviceRadio2" class="advice"><i class="adviceI"></i><span>康桥油库</span></label>
                    </div>
                    <div class="jca-form-item">
                        <input type="radio" name="type" id="adviceRadio3" value="3" th:field="*{depot_id}" hidden/>
                        <label for="adviceRadio3" class="advice"><i class="adviceI"></i><span>拱辰桥油库</span></label>
                    </div>
                </div>
            </div>
            <div class="jca-tydbox">
                <p>提油方式:</p>
                <div class="jca-tyd">
                    <div class="jca-form-item">
                        <input type="radio" name="type2" id="adviceRadio4" value="1" th:field="*{logistics}" hidden/>
                        <label  for="adviceRadio4" class="advice"><i class="adviceI"></i><span>自提</span></label>
                    </div>
                    <div class="jca-form-item">
                        <input type="radio" name="type2" id="adviceRadio5" value="2" th:field="*{logistics}" hidden/>
                        <label  for="adviceRadio5" class="advice"><i class="adviceI"></i><span>厂家配送</span></label>
                    </div>
                </div>
            </div>
        </div>
        </div>
        <div class="mjb-floor3">
            <table class="jicaiTable jcgoingTable">
                <thead>
                <tr>
                    <th style="width: 25%;">油品</th>
                    <th style="width: 25%;">集采价<br/>(元/吨)</th>
                    <th style="width: 20%;">已集采量<br/>(吨)</th>
                    <th style="width: 30%;">我的量<br/>(吨)</th>
                </tr>
                </thead>
                <tbody>
                <tr class="going-tr" th:each="pro:${collectModel.listPro}">
                    <td th:text="${pro.name}">92#汽油<br/>(国IV标准)</td>
                    <td th:span="${pro.lPrice}"  th:p="${pro.hPrice}">
                        <span class="orangeTd singlePrice" >7999</span>
                        <br/>
                        <p>起始价8000</p>

                    </td>
                    <td hidden class="orangeTd singleProductId" th:text="${pro.id}"></td>

                    <td class="orangeTd singleAmount" th:text="${pro.amount}">5000</td>

                    <td>
                        <div class="plusTd">
                            <span class="num-jian">-</span>
                            <span><input th:value="${pro.myAmount}"  type="text" onKeyUp="this.value=this.value.replace(/\D/g,'')"  onblur='if(this.value==""){this.value="0";};' class="input-num" /></span>
                            <span class="num-jia">+</span>
                        </div>
                    </td>
                </tr>

                </tbody>
            </table>
        </div>
        <div class="mjb-floor5 nobottompadding">
            <p>金额：<span class="totalPrice"></span></p>
            <p>合计：<span class="totalNum"></span></p>
        </div>
        <div class="mjb-floor7">
            <p>大写：<span class="BigPrice"></span></p>
        </div>
        <div class="mjb-floor6 jca-join">
            <a href="javascript:;">马上集采</a>
        </div>
    </div>
    <div class="myjicaiList">
        <div class="myjicaiTit">
            <h3>集采记录</h3>
        </div>
    </div>
    <div class="myjicaiListBody">
        <table>
            <thead>
            <tr>
                <th style="width: 12%;">用户名</th>
                <th style="width: 25%;">油品</th>
                <th style="width: 23%;">数量（吨）</th>
                <th style="width: 35%;">时间</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="pro:${list}">
                <td th:text="${pro.name}">**顺</td>
                <td th:text="${pro.proname}">92#汽油<br/>(国IV标准)</td>
                <td th:text="${pro.amount}">5000</td>
                <td th:text="${pro.time}">2018.08.08 10:27:30</td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
<!--弹窗-->
<div class="tanBox">
    <div class="tanFlex">
        <div class="tanBody">
            <div class="tanBodyTop">
                <h2>您的集采情况是</h2>
                <p>集采量：<span class="tanTotalNum">1000吨</span></p>
                <p>集采总金额：<span class="tanTotalPrice">16695000元</span></p>
                <p>大写：<span class="tanBigPrice">壹仟陆佰陆拾玖万伍仟元整</span></p>
            </div>
            <div class="tanBodyBottom">
                <a href="jacascript:;" class="active submitBtn">确定</a>
                <a href="jacascript:;">取消</a>
            </div>
        </div>
    </div>
</div>
<div class="footerheight"></div>

<div class="footer" th:include="footer :: fragment_footer"></div>

<script type="text/javascript" th:src="@{/js/jquery.min.js}" src="js/jquery.min.js" ></script>
<script type="text/javascript" th:src="@{/js/footer.js}" src="js/footer.js" ></script>
<script>
    $(document).ready(function(){
        $(".footerheight").height($(".footer").height());
        TotalPrice();
    })

    $(function(){
        $(".orderTopCheck a").click(function(){
            $(".orderTopCheck a").removeClass("active");
            $(this).addClass("active");
            var par = $(this).parents(".grayBody");
            par.find(".myorderBox").hide();
            var arr = par.find(".orderTopCheck a");
            var brr = par.find(".myorderBox:eq("+$.inArray(this,arr)+")");
            brr.show();
        })

        //弹窗出现和隐藏
        $(".jca-join a").click(function(){
            $(".tanBox").show();
            var totalNum = $(".totalNum").text();
            var totalPrice = $(".totalPrice").text();
            var BigPrice = $(".BigPrice").text();
            $(".tanTotalNum").text(totalNum);
            $(".tanTotalPrice").text(totalPrice);
            $(".tanBigPrice").text(BigPrice);
        })

        $(".tanBodyBottom a").click(function(){
            $(".tanBox").hide();
        })
        //点击确定获取数据
        $(".submitBtn").click(function(){
            //集采编号
            var number = $(".mjbfr-fifth span").text();
            //已集采数量
            var amount = $(".mjbfr-seven span").text();
            //提油点
            var depot_id = $("input[name='depot_id']:checked").val();
            //提油方式
            var logistics = $("input[name='logistics']:checked").val();

            var item="";
            $(".going-tr").each(function(){
                //获取产品ID
                var id = $(this).find(".singleProductId").text();

                //获取已经集采吨数
                var amount = $(this).find(".singleAmount").text();

                //获取数量
                var myNum = $(this).find(".input-num").val();
                // item +=id+','+amount+','+myNum+';';
                item +=id+','+myNum+';';
            });
            // alert(item+number);
            // alert('item='+item+'&number='+number+'&depot_id='+depot_id+'&logistics='+logistics);
            $.ajax({
                type:'get',
                url:'/verify/joinCollect?item='+item+'&number='+number+'&depot_id='+depot_id+'&logistics='+logistics,
                success:function (result) {
                    alert("参与成功");
                    location.href='getCollectDetail?collect_number='+number;
                }
                }

            );


        })
    })
</script>
<script type="text/javascript">
    var intDiff = parseInt(154560);//倒计时总秒数量
    function timer(intDiff){
        window.setInterval(function(){
            var day=0,
                hour=0,
                minute=0,
                second=0;//时间默认值
            if(intDiff > 0){
                day = Math.floor(intDiff / (60 * 60 * 24));
                hour = Math.floor(intDiff / (60 * 60)) - (day * 24);
                minute = Math.floor(intDiff / 60) - (day * 24 * 60) - (hour * 60);
                second = Math.floor(intDiff) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);
            }
            if (minute <= 9) minute = '0' + minute;
            if (second <= 9) second = '0' + second;
            $('#day_show').html(day+"天");
            $('#hour_show').html('<s id="h"></s>'+hour+'时');
            $('#minute_show').html('<s></s>'+minute+'分');
            $('#second_show').html('<s></s>'+second+'秒');
            intDiff--;
        }, 1000);
    }
    $(function(){
        timer(intDiff);
    });
</script>
</body>
</html>
